<template>
<!--    商品管理  -->
    <div class="product">

<!--        商品搜索 门店搜索  -->
        <div class="search">
            <div style="margin-right: 20px">
                <span class="search_status">状态:</span>
                <el-radio-group v-model="radio2" size="medium" @input="changeStatus">
                    <el-radio-button label="全部商品" ></el-radio-button>
                    <el-radio-button label="上架中"></el-radio-button>
                    <el-radio-button label="已下架"></el-radio-button>
                </el-radio-group>
            </div>
            <div class="search_store">
                <p>商品名称:</p>
                <input type="text" v-model="searchData.productName">
            </div>
            <div class="search_store">
                <p>所属门店:</p>
                <input type="text" v-model="searchData.productStore">
            </div>
            <div class="block">
                <span class="demonstration">发布日期:</span>
                <el-date-picker
                        v-model="searchData.createDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="search_buttom">
                <el-button type="primary" @click="searchProduct">搜索</el-button>
            </div>
        </div>


        <!--        表格 -->
        <el-table :cell-style="rowStyle"
                :data="productList.list"
                :header-cell-style="{'background-color':'#409EFF', color:'#fff'}"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="goodsId"
                    label="商品Id"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="goodsName"
                    label="商品"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="goodsShopName"
                    label="所属门店"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="goodsSalesVolume"
                    label="销量"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="goodsPresentPrice"
                    label="预估价"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="addTime"
                    label="发布时间"
                    align="center"
                    width="">
            </el-table-column>
            <el-table-column
                    prop="goodsStatus"
                    label="状态"
                    align="center"
                    width="">
                <template slot-scope="scope">
                <el-tag v-if="scope.row.goodsStatus == 1" type="success">上架中</el-tag>
                <el-tag v-else type="danger">已下架</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="80">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.goodsStatus == 0" @click="handleClickOn(scope.row)"
                               type="text" size="small">上架</el-button>
                    <el-button v-else type="text" size="small" @click="handleClickUp(scope.row)">下架</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination @current-change="pageChange" :current-page="page"
                    layout="prev, pager, next"
                    :total="productList.total">
            </el-pagination>
        </div>

    </div>


</template>

<script>
    export default {
        name: "ProductManagement",
        data: function (){
            return {
                productList: "",
                radio2: "全部商品",
                productStatus: "",
                page: 1, // 页码数 默认为 1
                searchData: {
                    productName: '',
                    productStore: '',
                    createDate: ['',''],
                }
            }
        },
        created() {
            this.getData(this.productStatus,this.page);
        },
        methods:{
            // 获取数据
            getData(status, page){
                this.axios.request("goods/querySearchShopGoodsList", {
                    params: {
                        pageNum: page,
                        pageSize: 10,
                        goodsName: '',
                        goodsStatus: status,
                        shopName: '',
                        startTime: '',
                        endTime: '',
                    }
                }).then((res) => {
                    this.productList = res.data.data;
                }).catch((err) => {
                    console.log(err)
                });
            },
            // 全部商品 已上架 已下架  点击按钮切换数据内容
            changeStatus(){
                this.productStatus = "";
                switch (this.radio2) {
                    case "上架中":
                        this.productStatus = "1";
                        break;
                    case "已下架":
                        this.productStatus = "0";
                        break;
                };
                this.getData(this.productStatus, this.page);
            },
            // 点击"上架"切换商品状态
            handleClickOn(row){
                this.axios.post("/goods/modifyShopGoods",{
                    goodsId: row.goodsId,
                    goodsStatus: 1,
                }).then((res)=>{
                    this.getData(this.productStatus,this.page);
                })
            },
            // 点击"下架"切换商品状态
            handleClickUp(row){
                this.axios.post("/goods/modifyShopGoods",{
                    goodsId: row.goodsId,
                    goodsStatus: 0,
                }).then((res)=>{
                    this.getData(this.productStatus,this.page);
                })
            },
            // 点击页码切换页面数据内容
            pageChange(val){
                // console.log(val)
                this.page = val;
                this.getData(this.productStatus, val)
            },
            // 搜索商品
            searchProduct(){
                console.log(this.searchData)
                this.axios.request("/goods/querySearchShopGoodsList", {
                    params: {
                        pageNum: 1,
                        pageSize: 10,
                        goodsName: this.searchData.productName,
                        goodsStatus: '',
                        shopName: this.searchData.productStore,
                        startTime: this.searchData.createDate[0],
                        endTime: this.searchData.createDate[1],
                    }
                }).then((res) => {
                    this.productList = res.data.data;
                }).catch((err) => {
                    console.log(err)
                });
            }

        }
    }
</script>

<style scoped>

    .product{
        width: 97%;
        /*height: 900px;*/
        padding: 1.5%;
        /*background-color: #69ffd5;*/
    }
    .search{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .search_status{
        line-height: 50px;
        margin-right: 10px;
    }
    .search .search_store{
        width: 280px;
        height: 50px;
        /*background-color: #2D93CA;*/
        margin-right: 10px;
    }
    .search_store>p{
        line-height: 50px;
        float: left;
        margin-right: 10px;
    }
    .search_store>input{
        width: 60%;
        line-height: 35px;
        float: left;
        margin-top: 7px;
        padding-left: 10px;
        outline: none;
        border-radius: 3px;
        border: 1px solid #dddddd;
    }
    .block{
        margin-right: 20px;
    }
    .demonstration{
        line-height: 50px;
        margin-right: 10px;
    }
    .search_buttom{
        line-height: 50px;
        margin-right: 10px;
    }

</style>